<template>
  <div class="goodsDetail">
    <div class="flex_align">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('凭证类型') }}：</span>
        <el-select
          v-model="formInfo.VoucherType"
          class="w164"
          :placeholder="translate('请选择')"
          @focus="changeFn('凭证类型')"
        >
          <el-option
            v-for="item in PZtypeArr"
            :key="item.code"
            :label="item.fullName"
            :value="item.code"
          />
        </el-select>
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('计划单号') }}：</span>
        <el-input v-model="formInfo.PlanNo" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('工厂') }}：</span>
        <el-select
          v-model="formInfo.Factory"
          class="w164"
          :placeholder="translate('请选择')"
          @focus="changeFn('工厂')"
        >
          <el-option
            v-for="item in FactoryArr"
            :key="item.code"
            :label="item.fullName"
            :value="item.code"
          />
        </el-select>
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('采购组') }}：</span>
        <el-select
          v-model="formInfo.PurchaseGroup"
          class="w164"
          :placeholder="translate('请选择')"
          @focus="changeFn('采购组')"
        >
          <el-option
            v-for="item in Purchasearr"
            :key="item.code"
            :label="item.fullName"
            :value="item.code"
          />
        </el-select>
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('供货工厂') }}：</span>
        <el-select
          v-model="formInfo.SupFactory"
          class="w164"
          :placeholder="translate('请选择')"
          @focus="changeFn('供货工厂')"
        >
          <el-option
            v-for="item in supplierdata"
            :key="item.code"
            :label="item.fullName"
            :value="item.code"
          />
        </el-select>
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('分配类别') }}：</span>
        <el-input v-model="formInfo.SubjectCate" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('交货时间') }}：</span>
        <el-date-picker type="date" v-model="formInfo.DeliveryDate" style="width: 164px" value-format="YYYYMMDD" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('成本中心') }}：</span>
        <el-select
          v-model="formInfo.CostCenter"
          class="w164"
          :placeholder="translate('请选择')"
          @focus="changeFn('成本中心')"
        >
          <el-option
            v-for="item in CBcenterArr"
            :key="item.code"
            :label="item.fullName"
            :value="item.code"
          />
        </el-select>
      </div>
      <!-- <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('合同编码') }}：</span>
        <el-select
          v-model="formInfo.CCode"
          class="w164"
          :disabled="true"
          :placeholder="translate('请选择')"
        >
          <el-option
            v-for="item in agreementData"
            :key="item.ContractCode"
            :label="item.ContractCode"
            :value="item.ContractCode"
          />
        </el-select>
      </div> -->
    </div>
    <!-- <div class="flex_align mt20"> -->

    <!-- <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('入库名称') }}：</span>
        <el-input v-model="formInfo.FullName" class="w164" />
      </div> -->
    <!-- <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('结论说明') }}：</span>
        <el-input v-model="formInfo.AcceptanceConclusion" class="w164" />
      </div> -->
    <!-- <div class="mr20">
        <span class="color_494949 ft12 pr5">
          {{ translate('财务复核人') }}：
        </span>
        <el-input v-model="formInfo.FinancialReviewer" class="w164" /> -->
    <!-- <el-select
          v-model="formInfo.FinancialReviewer"
          allow-create
          class="w164"
          default-first-option
          filterable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
    <!-- </div> -->
    <!-- </div> -->
    <div class="flex_align mt20">
      <!-- <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('采购订单') }}：</span>
        <el-select
          v-model="formInfo.PurchaseNo"
          class="w164"
          :disabled="from === 'edit' ? true : false"
          :placeholder="translate('请选择')"
          @change="changePono"
        >
          <el-option
            v-for="item in purchaseList"
            :key="item.PONo"
            :label="item.PONo"
            :value="item.PONo"
            @click="changeNo(item)"
          />
        </el-select>
      </div> -->
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('WBS元素') }}：</span>
        <el-input v-model="formInfo.WBSele" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('投资名称') }}：</span>
        <el-input v-model="formInfo.InvestName" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('技术标准') }}：</span>
        <el-input v-model="formInfo.TechLevel" class="w164" />
        <!-- <el-select
          v-model="formInfo.MaterialReceiver"
          allow-create
          class="w164"
          default-first-option
          filterable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('物资性质') }}：</span>
        <el-select
          v-model="formInfo.Wmsquality"
          class="w164"
          :placeholder="translate('请选择')"
        >
          <el-option
            v-for="item in Wmsqualityarr"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('计划类型') }}：</span>
        <el-select
          v-model="formInfo.PlanType"
          class="w164"
          :placeholder="translate('请选择')"
        >
          <el-option
            v-for="item in PlanTypearr"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('备注') }}：</span>
        <el-input v-model="formInfo.Remark" class="w320" type="text" />
      </div>
      <!-- <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('大类号') }}：</span>
        <el-input v-model="formInfo.CategoryNumber" class="w164" />
      </div> -->
    </div>
    <div class="tableDetail">
      <div class="button-add">
        <el-button size="small" type="primary" @click="addFn()">
          {{ translate('添加行') }}
        </el-button>
        <el-button size="small" type="danger" @click="deletedchild()">
          {{ translate('删除行') }}
        </el-button>
      </div>
      <el-scrollbar
        wrap-class="scrollbar-wrapper"
        wrap-style="overflow-x: auto;"
      >
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          height="300"
          :row-class-name="tableRowClassName"
          :row-key="getRowKey"
          style="width: 1150px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="value" type="selection" width="55" />
          <!-- <el-table-column label="序号" type="index" width="55" /> -->
          <!-- <el-table-column :label="translate('库位')" width="170">
            <template #default="{ row }">
              <el-autocomplete
                v-model="row.BatchNo"
                class="inline-input"
                :fetch-suggestions="querySearch"
                placeholder="库/架/层/位"
                @select="handleSelect"
              />
            </template>
          </el-table-column> -->
          <el-table-column
            :label="translate('类别')"
            prop="ItemCate"
            show-overflow-tooltip
          />
          <el-table-column :label="translate('物资编码')" prop="ItemCode" />
          <el-table-column :label="translate('物资名称')" prop="ItemName" />
          <el-table-column
            :label="translate('规格')"
            prop="ItemSpec"
            width="100"
          />
          <el-table-column
            :label="translate('物资组')"
            prop="ItemGroup"
            show-overflow-tooltip
          />
          <el-table-column
            :label="translate('物资组名称')"
            prop=" ItemGroupName"
          />
          <el-table-column :label="translate('数量')" width="100">
            <template #default="{ row }">
              <el-input v-model="row.Qty" type="text" @blur="totolFn(row)" />
            </template>
          </el-table-column>
          <el-table-column :label="translate('价格')" width="100">
            <template #default="{ row }">
              <el-input v-model="row.Price" type="text" @blur="totolFn(row)" />
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('计量单位')"
            prop="ItemUnit"
            width="60"
          />
          <!-- <el-table-column :label="translate('辅助计量单位数量')" width="100">
            <template #default="{ row }">
              <el-input v-model="row.AItemNum" type="text" />
            </template>
          </el-table-column> -->
          <!-- <el-table-column :label="translate('实收件数')" width="100">
            <template #default="{ row }">
              <el-input v-model="row.PaidInNum" type="text" />
            </template>
          </el-table-column>
          <el-table-column :label="translate('料款金额')" width="100">
            <template #default="{ row }">
              <el-input v-model="row.MaterialAmount" type="text" />
            </template>
          </el-table-column>
          <el-table-column :label="translate('运杂费')" width="100">
            <template #default="{ row }">
              <el-input v-model="row.TransportAmount" type="text" />
            </template>
          </el-table-column> -->
          <el-table-column :label="translate('金额')" width="100">
            <template #default="{ row }">
              <el-input v-model="row.TotalAmount" type="text" />
            </template>
          </el-table-column>
          <el-table-column :label="translate('用途')" width="100">
            <template #default="{ row }">
              <el-input v-model="row.Purpose" type="text" />
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <el-dialog
      v-model="dialogChiled"
      :title="translate('选择物资')"
      width="800px"
    >
      <div style="padding-bottom: 20px">
        <span class="color_494949 ft12 pr5">{{ translate('物资名称') }}：</span>
        <el-input
          v-model="searchChild"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <span class="color_494949 ft12 pr5">
            {{ translate('物资编码') }}：
          </span>
          <el-input
            v-model="seachCode"
            class="w164 mr10"
            :placeholder="translate('请输入物资编码')"
        />
        <div class="mt10">
          <span class="color_494949 ft12 pr5">{{ translate('单位') }}：</span>
          <el-input
            v-model="searchWHUnit"
            class="w164 mr10"
            :placeholder="translate('请输入单位')"
          />
          <span class="color_494949 ft12 pr5">
            {{ translate('存放地点') }}：
          </span>
          <el-input
            v-model="searchStorageLocation"
            class="w164 mr10"
            :placeholder="translate('请输入存放地点')"
          />
          <el-button
            class="settingBtn mr10"
            type="primary"
            @click="WmsGetPageData02('seach')"
          >
            {{ translate('查询') }}
          </el-button>
        </div>
      </div>
      <div>
        <el-table
          ref="multipleTable"
          border
          :data="WmsData"
          height="400"
          style="width: 800px"
          @row-click="clickrow"
          @selection-change="handleSelectionChangechiled"
        >
          <el-table-column prop="value" type="selection" width="55" />
          <el-table-column :label="translate('仓库单位')" prop="WHUnit" />
          <el-table-column :label="translate('物资编码')" prop="ItemCode" />
          <el-table-column :label="translate('物资类型')" prop="Owner" />
          <el-table-column :label="translate('物资名称')" prop="ItemName" />
          <el-table-column :label="translate('单位')" prop="ItemUnit" />
          <el-table-column :label="translate('规格')" prop="ItemSpec" />
          <el-table-column :label="translate('库存')" prop="StockQty" />
          <el-table-column
            :label="translate('存放地点')"
            prop="StorageLocation"
          />
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            :current-page="pageNo"
            :layout="layout"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentchiled"
            @size-change="handleSizechiled"
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogChiled = false">
          {{ translate('取消') }}
        </el-button>
        <el-button type="primary" @click="submitChiled()">
          {{ translate('确定') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import {
    WmsGetPageData02,
    searchArrivalNoticeDetail,
    GetDataDictionaryDetailList,
  } from '@/api/form'
  import { translate } from '@/i18n'
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
      fromtype: {
        type: String,
        default: '',
      },
      chileddetail: {
        type: Array,
        default: () => {
          return []
        },
      },
      agreementlist: {
        type: Array,
        default: () => {
          return []
        },
      },
      purchaselist: {
        type: Array,
        default: () => {
          return []
        },
      },
      whdata: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    emits: ['deletedchild', 'changelist'],
    data() {
      return {
        ItemList: [],
        itemChiledList: [],
        WmsData: [], // 选择物资数据
        formInfo: this.form,
        dialogChiled: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageNo: 1,
        pageSize: 10,
        radio: '',
        state1: '',
        Purchasearr: [],
        FactoryArr: [],
        PZtypeArr: [],
        CBcenterArr: [],
        supplierdata: [],
        PlanTypearr: [
          {
            value: '零星计划',
          },
          {
            value: '年度计划',
          },
          {
            value: '季度计划',
          },
        ],
        Wmsqualityarr: [
          {
            value: '生产物资',
          },
          {
            value: '工程物资',
          },
        ],
        optionsIBType: [
          {
            label: '委托仓储入库',
            value: '1',
          },
          {
            label: '正常入库',
            value: '2',
          },
        ],
        deleArr: [],
        tableData: this.chileddetail,
        agreementData: this.agreementlist,
        purchaseList: this.purchaselist,
        searchChild: '',
        searchStorageLocation: '',
        searchWHUnit: '',
        seachCode: '',
      }
    },
    watch: {
      chileddetail(val) {
        console.log(val)
        this.tableData = val
      },
      form(val) {
        this.formInfo = val
      },
      dialogChiled(val) {
        if(!val) {
          this.seachCode = ''
          this.searchWHUnit = ''
          this.searchChild = ''
          this.searchStorageLocation = ''
        }
      },
    },
    methods: {
      clickrow(row) {
        console.log(row)
        const selected = this.itemChiledList.some(
          (item) => item.ISID === row.ISID
        )
        if (!selected) {
          this.itemChiledList.push(row)
          this.$refs.multipleTable.toggleRowSelection(row, true)
        } else {
          const finaArr = this.itemChiledList.filter(
            (item) => item.ISID !== row.ISID
          )
          this.itemChiledList = finaArr
          this.$refs.multipleTable.toggleRowSelection(row, false)
        }
      },
      totolFn(row) {
        const total = row.Qty * row.Price
        row.TotalAmount = total.toFixed(2)
      },
      handleSelect(item) {
        console.log(item)
      },
      querySearch(queryString, cb) {
        const restaurants = this.whdata
        const results =
          queryString && queryString != 'null'
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants
        console.log(results)
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          console.log(restaurant)
          return (
            restaurant.value
              .toLowerCase()
              .indexOf(queryString.toLowerCase()) === 0
          )
        }
      },
      translate(row) {
        return translate(row)
      },
      changeNo(item) {
        this.formInfo.CCode = item.CNo
      },
      changeFn(val) {
        if (
          val === '工厂' ||
          val === '采购组' ||
          val === '凭证类型' ||
          val === '供货工厂' ||
          val === '成本中心'
        ) {
          console.log(val)
          if (
            this.FactoryArr.length <= 0 ||
            this.supplierdata.length <= 0 ||
            this.Purchasearr.length <= 0 ||
            this.PZtypeArr.length <= 0 ||
            this.CBcenterArr.length <= 0
          ) {
            this.getDictionaryList(val)
          }
        }
      },
      async getDictionaryList(val) {
        const params = {
          code: val,
        }
        const data = await GetDataDictionaryDetailList(params)
        if (data.code === '200') {
          if (val === '工厂') {
            this.FactoryArr = data.data?.data || []
          } else if (val === '采购组') {
            this.Purchasearr = data.data?.data || []
          } else if (val === '凭证类型') {
            this.PZtypeArr = data.data?.data || []
          } else if (val === '供货工厂') {
            this.supplierdata = data.data?.data || []
          } else if (val === '成本中心') {
            this.CBcenterArr = data.data?.data || []
          }
        }
      },
      //分页条数切换
      handleSizechiled(val) {
        this.pageSize = val
        this.WmsGetPageData02()
      },
      //分页切换
      handleCurrentchiled(val) {
        this.pageNo = val
        this.WmsGetPageData02()
      },
      tableRowClassName({ row, rowIndex }) {
        row.row_index = rowIndex
      },
      handleSelectionChange(e) {
        this.ItemList = e
      },
      handleSelectionChangechiled(e) {
        console.log(e)
        this.itemChiledList = e
      },
      changePono(val) {
        console.log(val)
        if (this.fromtype === 'goodslist') {
          this.searchArrivalNoticeDetail(val)
        }
      },
      async searchArrivalNoticeDetail(val) {
        const params = {
          pono: val,
        }
        const data = await searchArrivalNoticeDetail(params)
        if (data.Result.Code == '200') {
          this.tableData = data.Result.Data.data?.PurchaseOrderDetail
          this.formInfo = data.Result.Data.data
          this.formInfo.PurchaseNo = this.formInfo.PONo
          this.formInfo.CCode = this.formInfo.CNo
          this.$emit('changelist', data.Result.Data.data)
          console.log(this.formInfo)
          console.log(this.chileddetail)
        } else {
          this.tableData = []
        }
      },
      submitChiled() {
        if (this.itemChiledList.length <= 0) {
          this.$message({
            message: '请选择物料',
            type: 'warning',
          })
          return
        } else {
          const arrChiled = this.tableData
          this.itemChiledList.map((item) => {
            let istrue = false
            item.ItemDescription = `${item.ItemName} ${item.ItemSepc}`
            item.ModifyUserName = ''
            if (arrChiled.length > 0) {
              arrChiled.map((item2) => {
                if (item.ItemCode === item2.ItemCode) {
                  istrue = true
                }
              })
            }
            if (!istrue) {
              arrChiled.push(item)
            }
          })
          this.$nextTick(() => {
            this.tableData = arrChiled
          })
          this.dialogChiled = false
        }
      },
      getRowKey(row) {
        return row.IBDID
      },
      addFn() {
        this.itemChiledList = []
        this.$nextTick(() => {
          this.WmsGetPageData02()
        })
        console.log(this.chileddetail)
      },
      async WmsGetPageData02(val) {
        if (val === 'seach') {
          this.pageNo = 1
        }
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            {
              name: 'ItemName',
              value: this.searchChild,
              displayType: 'like',
            },
            {
              name: 'ItemCode',
              value: this.seachCode,
              displayType: 'like',
            },
            {
              name: 'WHUnit',
              value: this.searchWHUnit,
              displayType: 'like',
            },
            {
              name: 'StorageLocation',
              value: this.searchStorageLocation,
              displayType: 'like',
            },
          ]),
          export: false,
          value: '',
        }
        const data = await WmsGetPageData02(params)
        if (data.code == '200') {
          this.dialogChiled = true
          this.WmsData = data.data.rows
          this.total = data.data.total
        }
      },
      deletedchild() {
        if (this.ItemList.length <= 0) {
          this.$message({
            message: '请选择要删除的物料',
            type: 'warning',
          })
          return
        }
        this.$nextTick(() => {
          const arr = this.tableData
          for (let i = 0; i < this.ItemList.length; i++) {
            for (let j = 0; j < arr.length; j++) {
              if (!this.ItemList[i].IBDID) {
                if (this.ItemList[i].row_index === arr[j].row_index) {
                  arr.splice(j, 1)
                }
              } else if (this.ItemList[i].IBDID === arr[j].IBDID) {
                this.deleArr.push(arr[j].IBDID)
                arr.splice(j, 1)
              }
            }
          }
          this.ItemList = []
          this.tableData = arr
          this.$emit('deletedchild', this.deleArr)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    height: 600px;
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .mr20 {
    margin-right: 20px;
  }

  .w164 {
    width: 164px !important;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .w320 {
    width: 433px;
  }
  .color_494949 {
    width: 85px;
    display: inline-block;
    text-align: right;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
    white-space: nowrap;
    display: inline-block;
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
</style>
